/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="lane-table" ref="lane-table">
    <el-table
        :data="laneList"
        style="width: 100%"
        :max-height="tableHeight"
        v-loading.body="listLoading"
        id="footerBtn">
        <el-table-column
        label="ID"
        type="index"
        align="center">
        </el-table-column>
        <el-table-column
        prop="laneno"
        :label="$t('edge.lanetable.laneno')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="feature"
        :formatter="laneTypeFormat"
        :label="$t('edge.lanetable.lanetype')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="direction"
        :label="$t('edge.lanetable.direction')"
        :formatter="directionFormat"
        align="center">
        </el-table-column>
        <el-table-column
        prop="movement"
        :label="$t('edge.lanetable.movement')"
        :formatter="movementFormat"
        align="center">
        </el-table-column>
        <el-table-column
        prop="attribute"
        :label="$t('edge.lanetable.importandexport')"
        :formatter="importExportFormat"
        align="center">
        </el-table-column>
        <el-table-column
        prop="laneid"
        :label="$t('edge.lanetable.holographiclaneid')"
        align="center">
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { getIframdevid } from '@/utils/auth'
// import { getMessageByCode } from '@/utils/responseMessage'
// import CreateHolographicLaneId from './createHolographicLaneId.js'

export default {
  name: 'lanetable',
  data () {
    return {
      tableHeight: 700,
      listLoading: false,
      laneTypeMap: new Map([[1, '机动车车道'], [2, '非机动车车道'], [3, '机非混合车道'], [9, '其他']]),
      importExportMap: new Map([[1, '进口'], [2, '出口'], [9, '其他']]),
      directionMap: new Map([[0, '北'], [1, '东北'], [2, '东'], [3, '东南'], [4, '南'], [5, '西南'], [6, '西'], [7, '西北']]),
      movementMap: new Map([[11, '直行'], [12, '左转'], [13, '右转'], [21, '直左混行'], [22, '直右混行'], [23, '左右混行'], [24, '直左右混行'], [31, '掉头'], [99, '其他']])
    }
  },
  computed: {
    ...mapState({
      laneList: state => state.globalParam.tscParam.laneList
    })
  },
  mounted: function () {
    var _this = this
    _this.$nextTick(function () {
      _this.tableHeight = _this.$refs['lane-table'].offsetHeight - 40
      window.onresize = function () {
        _this.tableHeight = _this.$refs['lane-table'].offsetHeight - 40
      }
    })
  },
  created () {},
  methods: {
    laneTypeFormat (row, column) {
      return this.laneTypeMap.get(row.feature)
    },
    directionFormat (row, column) {
      return this.directionMap.get(row.direction)
    },
    movementFormat (row, column) {
      return this.movementMap.get(row.movement)
    },
    importExportFormat (row, column) {
      return this.importExportMap.get(row.attribute)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .lane-table {
  padding: 20PX;
  height: 100%;
}
</style>
